import React, {useContext, useEffect, useRef, useState} from "react";
import {Overlay} from "react-native-elements";
import {
    Dimensions,
    ImageBackground,
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    TextInput,
    TouchableWithoutFeedback, Keyboard, ScrollView, KeyboardAvoidingView
} from "react-native";
import {TouchableHighlight} from "react-native-gesture-handler";
import blueLogo from "../assets/chat/blueLogo.png"
import redLogo from "../assets/chat/redLogo.png"
import tranSuccess from "../assets/chat/tranSuccess.png"
import traning from "../assets/chat/traning.png"
import tranFalse from "../assets/chat/tranFalse.png"
import {timeFormat} from "../libs/helpers";
import Clipboard from "@react-native-community/clipboard";
import Toast from "react-native-simple-toast";
import LocaleContext from "../libs/locale";
import gift from '../assets/Assets/gift.png';


const {width, height,scale} = Dimensions.get("window");

const ChatInput = ({msg,visible,back,sending}:any) => {
    const locale:any = useContext(LocaleContext);
    const [SendMsg,setSendMsg] = useState(msg);
    const [Remain,setRemain] = useState(1000);
    const ref_input = useRef(null) as  React.MutableRefObject<any>;
    const [inputHeight,setInputHeight] = useState(width/360*35)
    useEffect(()=>{
        setSendMsg(msg)
    },[visible])

    //监听软键盘弹出
    useEffect(() => {

        const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
            back({type:"return",msg:""});
        });
        return () => {
            hideSubscription.remove();
        };
    }, []);

    return(
        (visible !== false)?(
                <View style={styles.body}>
                    <View  style={{height:height*0.05,width:width,backgroundColor:"#0000009E"}}/>
                    <View style={styles.container}>
                        <View style={styles.head}>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                onPress={()=>{
                                back({type:"return",msg:false})
                            }}>
                                <Text style={{}}>
                                    取消
                                </Text>
                            </TouchableOpacity>
                            <View style={{flex:1,justifyContent:"center",flexDirection:"row",paddingLeft:25}}>
                                <Text >
                                    回复
                                </Text>
                            </View>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                disabled={sending}
                                onPress={()=>{
                                    if(SendMsg=="")
                                    {
                                        return;
                                    }
                                    setSendMsg("")
                                    setRemain(1000)
                                    back({type:"send",msg:false})
                                }}>
                                <View style={{backgroundColor:"#3C9FF3",padding:7,paddingLeft:13,paddingRight:13,borderRadius:5,alignItems:"center",flexDirection:"row",justifyContent:"center"}}>
                                    <Text style={{color:"#fff"}}>
                                        发送
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                        {/*<ScrollView style={{flex:1}}>*/}
                        <View style={styles.input}>
                            <TextInput
                                style={{fontSize:width/360*16,letterSpacing:1,lineHeight:width/360*20,padding:0,paddingTop:3}}
                                // onContentSizeChange={(e)=>{
                                //     if((e.nativeEvent.contentSize.height) >= height*0.35)
                                //     {
                                //         setInputHeight(height*0.35)
                                //     }
                                //     else
                                //     {
                                //         setInputHeight(e.nativeEvent.contentSize.height)
                                //     }
                                //     if((e.nativeEvent.contentSize.height) < width/360*35)
                                //     {
                                //         setInputHeight(width/360*35)
                                //     }
                                // }}
                                underlineColorAndroid={'transparent'}
                                blurOnSubmit={false}
                                multiline={true}
                                maxLength={1000}
                                ref={ref_input}
                                placeholder={"回复消息"}
                                autoFocus={true}
                                value={SendMsg}
                                onFocus={() => {}}
                                onChangeText={
                                    (value) => {
                                        let length = value.length;
                                        setRemain(1000-length);
                                        setSendMsg(value);
                                        back({type:"changeText",msg:value})
                                    }
                                }
                            />
                        </View>
                            {/*<View style={styles.white}>*/}
                            {/*    <View style={{flexDirection:"column",alignItems:"flex-end",flex:1,paddingTop:25,paddingRight:10+width*0.05}}>*/}
                            {/*        <Text>*/}
                            {/*            还可以输入{Remain}字*/}
                            {/*        </Text>*/}
                            {/*    </View>*/}
                            {/*</View>*/}
                        {/*</ScrollView>*/}
                    </View>

                </View>
            )
            :null
    )
};
const styles = StyleSheet.create({
    body:{
        position:"absolute",
        top:0,
        left:0,
        right:0,
        bottom:0,
        // marginTop:-height*0.94,
        // height:height*0.94,
        width:width,
        backgroundColor:"#0000003e",
    },
    container:{
        flex:1,
        backgroundColor:"#fff",
        alignItems:"center"
    },
    head:{
        height:50,
        padding:10,
        flexDirection:"row",
        alignItems:"center",
        // shadowRadius:25,
        // shadowColor:"#D7D5D5",
        // backgroundColor:"pink"
        borderBottomWidth:1/scale,
        borderBottomColor:"#9C9B9B"
    },
    input:{
        flex:1,
        padding:10,
        paddingTop:0,
        width:width,
        backgroundColor:"#fff",
    },
    white:{
        width:width,
        height:height,
        backgroundColor:"#F6F6F6",
        flexDirection:"column",
    }

});
export default ChatInput;
